<template>
    <div class="home-page">
      <div class="page-card">
        <div class="page-header">
          <div class="title">个人信息</div>
        </div>
        <div class="page-content">
          <div class="info-cell">
            <div class="left">
              <img class="img-icon" src="../../assets/image/commission_img.png" alt="">
              <div class="info-box">
                <div>累计收入：{{commission.history_commission}}</div>
                <div>佣金金额：{{commission.commission}}</div>
              </div>
            </div>
          </div>
          <div class="info-cell">
            <div class="left">
              <img class="img-icon" src="../../assets/image/user_img.png" alt="">
              <div class="info-box">
                <div>姓&ensp;&ensp;名：{{userInfo.name}}</div>
                <div>手机号：{{userInfo.phone}}</div>
              </div>
            </div>
            <div class="right" @click="modifyPasswordDialog = true">
              修改密码
            </div>
          </div>

          <div class="info-cell">
            <div class="left">
              <img class="img-icon" src="../../assets/image/card_img.png" alt="">
              <div class="info-box">
                <div>开户行：{{userInfo.bank}}</div>
                <div>卡&ensp;&ensp;号：{{userInfo.bank_account}}</div>
              </div>
            </div>
            <div class="right" @click="bankDialog = true">
              立即修改
            </div>
          </div>
          <div class="info-cell">
            <div class="left">
              <img class="img-icon" src="../../assets/image/wx_service_icon.png" alt="">
              <span class="name">微信号:</span>
              <span class="content">{{userInfo.we_chat}}</span>
            </div>
            <div class="right" @click="weChatDialog = true">
              立即修改
            </div>
          </div>
          <div class="info-cell">
            <div class="left">
              <img class="img-icon" src="../../assets/image/qq_service_icon.png" alt="">
              <span class="name">&ensp;QQ号:</span>
              <span class="content">{{userInfo.qq}}</span>
            </div>
            <div class="right" @click="qqDialog = true">
              立即修改
            </div>
          </div>
        </div>
      </div>
        <el-dialog title="修改银行卡" :visible.sync="bankDialog" width="500px">
            <div>
                <el-form :model="bindBank" :rules="bankRules" ref="bindBank">
                    <el-form-item label="账户名：" prop="bankName">
                        <el-input placeholder="请输入账户名" v-model="bindBank.bankName" size="small" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="银行卡："  prop="bank">
                        <el-select v-if="!isInput" v-model="bindBank.bank" placeholder="请选择类型" size="small">
                            <el-option v-for="(item, index) in bankNameData" :key="index" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                        <el-input v-else placeholder="请输入银行卡名称"  v-model="bindBank.bank" size="small" clearable style="width: 200px;"></el-input>
                        <el-checkbox v-model="isInput" style="margin-left:40px;">其他银行</el-checkbox>

                    </el-form-item>
                    <el-form-item label="卡号：" prop="bankAccount">
                        <el-input placeholder="请输入卡号"  v-model="bindBank.bankAccount" size="small" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="开户行：" prop="accountBank">
                        <el-input placeholder="请输入开户行"  v-model="bindBank.accountBank" size="small" clearable></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="bankDialog = false" class="cancle-btn">取 消</el-button>
              <el-button class="confirm-btn" :loading="submitOptLoading" @click="submitBank">确 定</el-button>
            </span>
          </el-dialog>
          <el-dialog title="修改密码" :visible.sync="modifyPasswordDialog" width="500px">
            <div>
                <el-form :model="passwordForm" :rules="passwordRules" ref="passwordForm">
                    <el-form-item label="旧密码" prop="oldPassword">
                        <el-input placeholder="请输入旧密码" type="password" v-model="passwordForm.oldPassword" size="small" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="newPassword">
                        <el-input placeholder="请输入新密码" type="password"  v-model="passwordForm.newPassword" size="small" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="确认新密码" prop="againPassword">
                        <el-input placeholder="请输入新密码" type="password"  v-model="passwordForm.againPassword" size="small" clearable></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="modifyPasswordDialog = false" class="cancle-btn">取 消</el-button>
              <el-button class="confirm-btn" :loading="submitOptLoading" @click="submitPassword">确 定</el-button>
            </span>
          </el-dialog>
          <el-dialog title="修改微信号" :visible.sync="weChatDialog" width="500px">
            <div>
                <el-form :model="bindWechat" :rules="weChatRules" ref="bindWechat">
                    <el-form-item label="微信号：" prop="weChatNum">
                        <el-input placeholder="请输入微信号" v-model="bindWechat.weChatNum" size="small" clearable></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="weChatDialog = false" class="cancle-btn">取 消</el-button>
              <el-button class="confirm-btn" :loading="submitOptLoading" @click="submitWeChat">确 定</el-button>
            </span>
          </el-dialog>
          <el-dialog title="修改qq号" :visible.sync="qqDialog" width="500px">
            <div>
                <el-form :model="bindQQ" :rules="qqRules" ref="bindQQ">
                    <el-form-item label="qq号：" prop="weChatNum">
                        <el-input placeholder="请输入qq号" v-model="bindQQ.qq" size="small" clearable></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="qqDialog = false" class="cancle-btn">取 消</el-button>
              <el-button class="confirm-btn" :loading="submitOptLoading" @click="submitQQ">确 定</el-button>
            </span>
          </el-dialog>
    </div>
</template>
<script>
import {apiUserInfo, apiPromoterIndex,apiBindWeChatBankNum,apiFindPassword} from '../../request/api'
    export default {
        data(){
            var checkOldPassword = (rule, value, callback) =>{
                if (value === '') {
                    callback(new Error('请输入旧密码'));
                } else {
                    callback();
                }
            };
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入新密码'));
                } else {
                if (this.passwordForm.againPassword !== '') {
                    this.$refs.passwordForm.validateField('checkPass');
                }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                callback(new Error('请再次输入密码'));
                } else if (value !== this.passwordForm.newPassword) {
                callback(new Error('两次输入密码不一致!'));
                } else {
                callback();
                }
            };
            return {
                userInfo: {},
                commission: {},
                code: '',
                submitOptLoading: false,
                bankDialog: false,
                weChatDialog: false,
                modifyPasswordDialog: false,
                bindBank:{
                  token: window.sessionStorage.getItem("token"),
                  bindType: 2,
                  bankName: '',
                  bank: '',
                  bankAccount: '',
                  accountBank: ''
                },
                bankRules:{
                    bankName: [
                        { required: true, message: '请输入账户名', trigger: 'blur' }
                    ],
                    bank: [
                        { required: true, message: '请选择开户银卡', trigger: 'change' }
                    ],
                    bankAccount: [
                        { required: true, message: '请输入开户账户', trigger: 'blur' }
                    ],
                    accountBank: [
                       { required: true, message: '请输入开户行', trigger: 'blur' }
                    ]
                },
                bindWechat:{
                    token: window.sessionStorage.getItem("token"),
                    bindType: 1,
                    weChatNum: ''
                },
                bindQQ:{
                  token: window.sessionStorage.getItem("token"),
                  bindType: 3,
                  qq: ''
                },
                weChatRules: {
                     weChatNum: [
                        { required: true, message: '请输入微信号', trigger: 'blur' }
                    ]
                },
                qqRules: {
                     qq: [
                        { required: true, message: '请输入qq号', trigger: 'blur' }
                    ]
                },
                bankNameData: [{
                    label: '中国工商银行',
                    value: '中国工商银行'
                },{
                    label: '招商银行',
                    value: '招商银行'
                },{
                    label: '中国农业银行',
                    value: '中国农业银行'
                },{
                    label: '中国建设银行',
                    value: '中国建设银行'
                },{
                    label: '兴业银行',
                    value: '兴业银行'
                },{
                    label: '交通银行',
                    value: '交通银行'
                },{
                    label: '浦发银行',
                    value: '浦发银行'
                },{
                    label: '平安银行',
                    value: '平安银行'
                }],
                passwordRules: {
                    oldPassword: [
                        { validator: checkOldPassword, trigger: 'blur' }
                    ],
                    newPassword: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    againPassword: [
                        { validator: validatePass2, trigger: 'blur' }
                    ],
                },
                passwordForm: {
                    token: window.sessionStorage.getItem("token"),
                    oldPassword: '',
                    newPassword: '',
                    againPassword: '',
                    phone: ''
                },
                qqDialog: false,
                isInput: false
            }
        },
        created () {
             this.getUserInfo()
             apiPromoterIndex({
                 token: window.sessionStorage.getItem("token")
             }).then(res =>{
               this.commission = res.msg
            }).catch(res => {

            })
        },
        methods:{
            getUserInfo(){
                apiUserInfo({
                    token: window.sessionStorage.getItem("token")
                }).then(res =>{
                    this.userInfo = res.msg
                    this.passwordForm.phone = this.userInfo.phone
                    window.sessionStorage.setItem("uid", this.userInfo.id);
                    window.sessionStorage.setItem("userPhone", this.userInfo.phone);
                    window.sessionStorage.setItem("userPassword", this.userInfo.password);
                }).catch(res => {

                })
            },
            submitBank(){
                 this.$refs['bindBank'].validate((valid) => {
                     if (valid) {
                         this.submitOptLoading = true
                        apiBindWeChatBankNum(this.bindBank).then(res =>{
                            if(res.code == 1){
                                this.$message.success('修改成功')
                                this.submitOptLoading = false
                                this.bankDialog = false
                                this.$refs['bindBank'].resetFields();
                                this.getUserInfo()
                            } else {
                                this.submitOptLoading = false
                                this.$message.error(res.msg)
                            }
                        }).catch(res => {

                        })
                     } else {
                         return false
                     }
                 })

            },
            submitPassword(){
                this.$refs['passwordForm'].validate((valid) => {
                    if (valid) {
                        this.submitOptLoading = true
                        apiFindPassword(this.passwordForm).then(res =>{
                            if(res.code == 1){
                                this.$message.success('修改成功，请重新登录')
                                this.submitOptLoading = false
                                this.modifyPasswordDialog = false
                                setTimeout(()=>{
                                    window.sessionStorage.clear();
                                    this.$router.push("./login");
                                },500)

                            } else {
                                this.submitOptLoading = false
                                this.$message.error(res.msg)
                            }
                        }).catch(res => {

                        })
                    } else {
                        return false
                    }
                })
            },
            submitQQ(){
              this.$refs['bindQQ'].validate((valid) => {
                  if (valid) {
                      this.submitOptLoading = true
                     apiBindWeChatBankNum(this.bindQQ).then(res =>{
                         if(res.code == 1){
                             this.$message.success('修改成功')
                             this.submitOptLoading = false
                             this.qqDialog = false
                              this.$refs['bindQQ'].resetFields();
                             this.getUserInfo()
                         } else {
                             this.submitOptLoading = false
                             this.$message.error(res.msg)
                         }
                     }).catch(res => {

                     })
                  } else {
                      return false
                  }
              })
            },
            submitWeChat(){
                 this.$refs['bindWechat'].validate((valid) => {
                     if (valid) {
                         this.submitOptLoading = true
                        apiBindWeChatBankNum(this.bindWechat).then(res =>{
                            if(res.code == 1){
                                this.$message.success('修改成功')
                                this.submitOptLoading = false
                                this.weChatDialog = false
                                 this.$refs['bindWechat'].resetFields();
                                this.getUserInfo()
                            } else {
                                this.submitOptLoading = false
                                this.$message.error(res.msg)
                            }
                        }).catch(res => {

                        })
                     } else {
                         return false
                     }
                 })

            }
        }
    }
</script>
<style lang="less">
    .home-page {
      .page-card {
        background: #FFFFFF;
        margin-bottom: 16px;
        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        padding-bottom: 16px;
        border-radius: 5px;
        .page-header {
          background: #ecf5ff;
          padding: 10px;
          display: flex;
          align-items: center;
          margin-bottom: 16px;
          .title {
            line-height: 20px;
            border-left: 3px solid #666666;
            padding-left: 10px;
            font-size: 16px;
            font-weight: 700;
            color: #333333;
            width: 150px;
          }
        }
        .page-content {
          padding: 10px 20px ;
          .info-cell {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width:400px;
            margin-bottom: 20px;
            .left {
              color: #333333;
              .info-box {
                display: inline-block;
                vertical-align: middle;
                margin-left: 10px;
              }
              .img-icon {
                width: 20px;
                height: 20px;
                display: inline-block;
                vertical-align: middle;
                margin-right: 10px;
              }
              .name {
                margin-left: 10px;
              }
              .content {
                margin-left: 16px;
              }
            }
            .right {
              border: 1px solid #e0e0e0;
              padding: 3px 15px;
              border-radius: 5px;
              font-size: 14px;
              cursor: pointer;
              color: #666666;
            }
          }
        }
      }
       .cursor {
            cursor: pointer;
       }
       .el-form-item__label {
           width: 100px;
       }
       .confirm-btn {
           background: #4b95ff;
           color: #ffffff;
       }
        .user-info {
            display: flex;
            justify-content: space-around;
            // flex-wrap: wrap;
            .user-info-card {
                display: flex;
                justify-content:center;
                align-items:center;

                border: 1px solid #e0e0e0;
                border-radius: 10px;
                font-size: 14px;
                padding: 20px 10px;
                margin: 10px;
                .card-img-box {
                    margin-right: 10px;
                    .card-img {
                        width: 50px;
                        height: 50px;
                    }


                }
                .card-right {
                    .user-name {
                        margin-bottom: 10px;
                    }
                }
                .edit-img {
                    width: 15px;
                    height: 15px;
                    margin-left: 10px;
                }
            }
        }
    }
</style>
